<template>
  <div class="mod-charge-type">
    <avue-crud ref="crud" :data="dataList" :option="tableOption">
      <template slot-scope="scope" slot="image">
          <el-image :src="scope.row.image"
             :preview-src-list="[scope.row.image]"
             style="width: 40px; height: 40px"
             :fit="'fill'" alt="点击预览大图" slot="reference">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
           </el-image>
      </template>
      <template slot-scope="scope"
                slot="enableFlag">
        <el-tag v-if="scope.row.enableFlag === 0"
                size="small"
                type="danger">禁用</el-tag>
        <el-tag v-else
                size="small">正常</el-tag>
      </template>
      <template slot-scope="scope"
                slot="menu">
        <el-button type="danger"
                   size="small"
                   v-if="scope.row.enableFlag === 0"
                   @click.stop="enable_click(scope.row)">启用</el-button>
        <el-button type="danger"
                   size="small"
                   v-if="scope.row.enableFlag === 1"
                   @click.stop="enable_click(scope.row)">禁用</el-button>
        <el-button type="primary"
                   icon="el-icon-edit"
                   size="small"
                   @click.stop="updateDetail_click(scope.row)">编辑</el-button>
      </template>
    </avue-crud>
    <update-detail v-if="updateDetailVisable" ref="updateDetailModal" @refreshDataList="getDataList"></update-detail>
  </div>
</template>

<script>
  import { tableCarOption } from '@/crud/charging-type/index.js'
  import updateDetail from './update-detail.vue'
  export default {
    components: {
      updateDetail
    },
    data () {
      return {
        dataList: [],
        dataListLoading: false,
        tableOption: tableCarOption,
        updateDetailVisable:false,
        preImagList:[],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 1000 // 每页显示多少条
        }
      }
    },
    mounted () {
      this.getDataList()
    },
    methods: {
      // 获取数据列表
      getDataList (page, params) {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/v1/charging/type/merchant/list'),
          method: 'GET',
          params: {deviceType:1}
        }).then(({ data }) => {
          this.dataList = data.data
          this.dataListLoading = false
        })
      },
      updateDetail_click(obj){
        this.updateDetailVisable = true
        this.$nextTick(() => {
          this.$refs.updateDetailModal.init(obj)
        })
      },
      doChange(obj){
        let flag = (Number(obj.enableFlag)-1)*-1
        console.log(flag)
        this.$http({
          url:this.$http.adornUrl('/v1/charging/type/merchant/update/status'),
          method:'POST',
          data:this.$http.adornData({id:obj.id,enableFlag:flag})
        }).then(({data})=>{
          this.loading=false
          this.$message({
            type:'success',
            message:'状态更新成功',
            duration:1500,
          })
          this.getDataList()
        }).catch((error)=>{
          this.loading=false
        })
      },
      enable_click(obj){
        this.$confirm('确定更改当前记录状态?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.doChange(obj)
        }).catch(() => {
          this.$message({
            type:'info',
            message:'操作已取消',
            duration:1500,
          })
        });
      }
    }
  }
</script>

<style lang="scss">
  .remain{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    input{
      width: 100px;
    }
  }
  .sumary-list{
    display: flex;
    justify-content: flex-start;
    margin-bottom: 15px;
    div{
      height: 30px;
      padding: 0px 12px;
      line-height: 30px;
      border:solid 1px #009FF1;
      border-radius: 15px;
      margin-right: 10px;
    }
    div:hover{
      color: white;
      background-color: #009FF1;
    }
  }
</style>
